<template>
    <div class="project-set">
        <div class="back-btn">
            <el-button icon="el-icon-back" type="text" @click="$router.go(-1)">返回</el-button>
        </div>
        <el-tabs v-model="activeName">
            <el-tab-pane v-for="(item, i) in componentIds" :key="i" :label="item.label" :name="`${i}`">
                <component v-if="`${i}`===activeName" :is="item.componentId"></component>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
import InfoSet from './infoSet'
import Member from './member'
import TableSet from './tableSet'
import DataSource from './dataSource'
export default {
    name: 'ProjectSet',
    data () {
        return {
            activeName: '0',
            componentIds: [
                { label: '项目设置', componentId: InfoSet },
                { label: '成员管理', componentId: Member },
                { label: '数据表设置', componentId: TableSet },
                { label: '数据源管理', componentId: DataSource }
            ]
        }
    }
}
</script>
<style lang="less">
    .project-set {
        position: relative;
        .back-btn {
            position: absolute;
            right: 0;
            top: 12px;
            z-index: 1;
        }
    }
</style>
